<template>
  <div>
    <el-form class="out-form"
             size="medium"
             label-position="right"
             label-width="200px">
      <div class="breach-area">
        <div class="title">
          <div class="point"></div>
          <span>基础信息</span>
        </div>
        <el-form-item label="区域"
                      required>
          <el-radio v-model="product.area"
                    label=1>全国</el-radio>
          <el-radio v-model="product.area"
                    label=2>&nbsp;</el-radio>
          <el-select v-model="product.cityIds"
                     multiple
                     filterable
                     collapse-tags
                     placeholder="试试搜索"
                     :disabled="product.area === '1'">
            <el-option-group v-for="group in cityList"
                             :key="group.id"
                             :value="group.id"
                             :label="group.cityname">
              <el-option v-for="item in group.children"
                         :key="item.id"
                         :label="item.cityname"
                         :value="item.id">
              </el-option>
            </el-option-group>
          </el-select>
        </el-form-item>
        <el-form-item label="金融产品公司全称"
                      required>
          <el-select v-model="product.supplierId"
                     filterable
                     placeholder="请选择金融产品公司"
                     @change="setDetail(product.supplierId)">
            <el-option v-for="item in companyList"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
          <el-button plain
                     type="primary"
                     size="mini"
                     @click="() => { this.$router.push({ name: 'supplier' }) }">新增</el-button>
        </el-form-item>
        <el-form-item label="金融产品经理">
          <el-col :span="7">
            <el-form-item>
              <el-input v-model="product.manager"
                        size="medium"
                        disabled></el-input>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="手机号">
          <el-col :span="7">
            <el-form-item>
              <el-input v-model.number="product.managerPhone"
                        size="medium"
                        disabled></el-input>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="方案名称"
                      required>
          <el-col :span="7">
            <el-form-item>
              <el-input v-model="product.productName"
                        placeholder="请输入方案名称"
                        size="medium"></el-input>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="融资额区间"
                      required>
          <el-col :span="6">
            <el-form-item>
              <el-input v-model.number="product.loanLower"
                        size="medium">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col class="line"
                  :span="2"
                  style="text-align: center">———</el-col>
          <el-col :span="6">
            <el-form-item>
              <el-input v-model.number="product.loanUpper"
                        size="medium">
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="质押率">
          <el-col :span="7">
            <el-form-item>
              <el-input v-model="product.pledgeRate"
                        placeholder="请输入质押率"
                        size="medium">
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="首付比例"
                      required>
          <el-col :span="7">
            <el-form-item>
              <el-input v-model.number="product.downpayRatio"
                        size="medium">
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="分期"
                      required>
          <el-checkbox-group v-model="product.periods"
                             @change="checked">
            <el-checkbox label=12>12</el-checkbox>
            <el-checkbox label=24>24</el-checkbox>
            <el-checkbox label=36>36</el-checkbox>
            <el-checkbox label=48>48</el-checkbox>
            <el-checkbox label=60>60</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item v-if="periodTabs.length > 0">
          <el-col :span="20">
            <el-tabs v-model="periodTabValue"
                     type="border-card">
              <el-tab-pane v-for="(item, index) in periodTabs"
                           :key="index"
                           :name="item.index">
                <template slot="label">
                  <span>{{item.period}}</span>
                </template>
                <el-form size="medium"
                         label-position="right"
                         label-width="100px">
                  <el-form-item label="成本利率"
                                required>
                    <el-form>
                      <el-form-item>
                        <el-col :span="10">
                          <el-radio v-model="item.rateType"
                                    :label=1
                                    border>现返</el-radio>
                          <el-radio v-model="item.rateType"
                                    :label=2
                                    border>次返</el-radio>
                        </el-col>
                        <template v-if="item.rateType">
                          <el-col :span="1">
                            <el-button icon="el-icon-plus"
                                       type="primary"
                                       circle
                                       size="mini"
                                       @click="() => { item.rateLoop.push({}) }"></el-button>
                          </el-col>
                          <el-col :span="1">
                            <el-button icon="el-icon-minus"
                                       type="danger"
                                       circle
                                       size="mini"
                                       @click="() => { item.rateLoop.length>1?item.rateLoop.pop():null }"></el-button>
                          </el-col>
                        </template>
                      </el-form-item>
                      <el-form-item v-if="item.rateType == 1">
                        <template v-for="(rateItem, key) in item.rateLoop">
                          <el-col :key="key">
                            <el-col :span="5">
                              <el-form-item>
                                <el-input v-model.number="rateItem.showRate"
                                          placeholder="展示利率"
                                          size="medium">
                                  <template slot="append">%</template>
                                </el-input>
                              </el-form-item>
                            </el-col>
                            <el-col :span="5">
                              <el-form-item>
                                <el-input v-model.number="rateItem.interestRate"
                                          placeholder="成本利率"
                                          size="medium">
                                  <template slot="append">%</template>
                                </el-input>
                              </el-form-item>
                            </el-col>
                            <el-col class="line"
                                    :span="1"
                                    style="text-align: center">返</el-col>
                            <el-col :span="5">
                              <el-form-item>
                                <el-input v-model.number="rateItem.internalRatio"
                                          size="medium">
                                  <template slot="append">%</template>
                                </el-input>
                              </el-form-item>
                            </el-col>

                          </el-col>
                        </template>
                      </el-form-item>
                      <el-form-item v-if="item.rateType == 2">
                        <template v-for="(rateItem, key) in item.rateLoop">
                          <el-col :key="key">
                            <el-col :span="5">
                              <el-form-item>
                                <el-input v-model.number="rateItem.showRate"
                                          placeholder="展示利率"
                                          size="medium">
                                  <template slot="append">%</template>
                                </el-input>
                              </el-form-item>
                            </el-col>
                            <el-col :span="5">
                              <el-form-item>
                                <el-input v-model.number="rateItem.interestRate"
                                          placeholder="成本利率"
                                          size="medium">
                                  <template slot="append">%</template>
                                </el-input>
                              </el-form-item>
                            </el-col>
                            <el-col class="line"
                                    :span="1"
                                    style="text-align: center">返</el-col>
                            <el-col :span="5">
                              <el-form-item>
                                <el-input v-model.number="rateItem.internalRatio"
                                          placeholder="返经纪人，车商"
                                          size="medium">
                                  <template slot="append">%</template>
                                </el-input>
                              </el-form-item>
                            </el-col>
                            <el-col class="line"
                                    :span="1"
                                    style="text-align: center">/</el-col>
                            <el-col :span="5">
                              <el-form-item>
                                <el-input v-model.number="rateItem.returnPlatform"
                                          placeholder="返平台"
                                          size="medium">
                                  <template slot="append">%</template>
                                </el-input>
                              </el-form-item>
                            </el-col>
                          </el-col>
                        </template>
                      </el-form-item>
                    </el-form>
                  </el-form-item>
                  <el-form-item label="账户管理费"
                                required>
                    <el-row>
                      <el-col :span="10">
                        <el-radio v-model="item.serviceChargeType"
                                  :label=1
                                  border>不可融</el-radio>
                        <el-radio v-model="item.serviceChargeType"
                                  :label=2
                                  border>可融</el-radio>
                      </el-col>
                      <template v-if="item.serviceChargeType == 2">
                        <el-col :span="1">
                          <el-button icon="el-icon-plus"
                                     type="primary"
                                     circle
                                     size="mini"
                                     @click="() => { item.chargeLoop.push({}) }"></el-button>
                        </el-col>
                        <el-col :span="1">
                          <el-button icon="el-icon-minus"
                                     type="danger"
                                     circle
                                     size="mini"
                                     @click="() => { item.chargeLoop.length>1?item.chargeLoop.pop():null }"></el-button>
                        </el-col>
                      </template>
                    </el-row>
                    <template v-if="item.serviceChargeType == 2">
                      <el-row>
                        <el-col :span="10">
                          <el-form label-width="70px">
                            <el-form-item label="可融比">
                              <el-input v-model.number="item.sCFinanceRate"
                                        size="medium">
                                <template slot="append">%</template>
                              </el-input>
                            </el-form-item>
                          </el-form>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col>
                          <el-radio v-model="item.serviceChargeRide"
                                    :label=1
                                    border>乘以车辆贷款额</el-radio>
                          <el-radio v-model="item.serviceChargeRide"
                                    :label=2
                                    border>乘以车辆销售价</el-radio>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="22">
                          <el-carousel indicator-position="outside"
                                       :autoplay="false"
                                       arrow="always"
                                       height="230px">
                            <el-carousel-item v-for="(chargeItem, key) in item.chargeLoop"
                                              :key="key">
                              <template>
                                <el-form label-width="150px">
                                  <el-form-item label="车辆销售价区间">
                                    <el-col :span="8">
                                      <el-input v-model.number="chargeItem.lower"
                                                placeholder="车辆销售价"
                                                size="medium">
                                        <template slot="append">元</template>
                                      </el-input>
                                    </el-col>
                                    <el-col class="line"
                                            :span="1"
                                            style="text-align: center">~</el-col>
                                    <el-col :span="8">
                                      <el-input v-model.number="chargeItem.upper"
                                                placeholder="车辆销售价"
                                                size="medium">
                                        <template slot="append">元</template>
                                      </el-input>
                                    </el-col>
                                  </el-form-item>
                                  <el-form-item>
                                    <el-col :span="8">
                                      <el-input v-model.number="chargeItem.quota"
                                                placeholder="定额上限"
                                                size="medium">
                                        <template slot="append">元</template>
                                      </el-input>
                                    </el-col>
                                    <el-col :span="8"
                                            :push="1">
                                      <el-input v-model.number="chargeItem.percentage"
                                                placeholder="百分比上限"
                                                size="medium">
                                        <template slot="append">%</template>
                                      </el-input>
                                    </el-col>
                                  </el-form-item>
                                  <el-form-item>
                                    <el-col :push="1">
                                      <el-radio v-model="chargeItem.min"
                                                :label="false">两者取最大</el-radio>
                                      <el-radio v-model="chargeItem.min"
                                                :label="true">两者取最小</el-radio>
                                    </el-col>
                                  </el-form-item>
                                  <el-form-item label="平台服务费">
                                    <el-col :span="8">
                                      <el-input v-model.number="chargeItem.platformQuota"
                                                placeholder="定额"
                                                size="medium">
                                        <template slot="append">元</template>
                                      </el-input>
                                    </el-col>
                                    <el-col :span="8"
                                            :push="1">
                                      <el-input v-model.number="chargeItem.platformPercentage"
                                                placeholder="百分比"
                                                size="medium">
                                        <template slot="append">%</template>
                                      </el-input>
                                    </el-col>
                                  </el-form-item>
                                  <el-form-item label="大客户服务费">
                                    <el-col :span="8">
                                      <el-input v-model.number="chargeItem.bigQuota"
                                                placeholder="定额"
                                                size="medium">
                                        <template slot="append">元</template>
                                      </el-input>
                                    </el-col>
                                    <el-col :span="8"
                                            :push="1">
                                      <el-input v-model.number="chargeItem.bigPercentage"
                                                placeholder="百分比"
                                                size="medium">
                                        <template slot="append">%</template>
                                      </el-input>
                                    </el-col>
                                  </el-form-item>
                                </el-form>
                              </template>
                            </el-carousel-item>
                          </el-carousel>
                        </el-col>
                      </el-row>
                    </template>
                  </el-form-item>
                  <el-form-item label="前置扣息">
                    <el-row>
                      <el-radio v-model="item.preDeductionType"
                                :label=1
                                border>乘以总贷款额</el-radio>
                      <el-radio v-model="item.preDeductionType"
                                :label=2
                                border>乘以车辆贷款</el-radio>
                    </el-row>
                    <el-row v-if="item.preDeductionType">
                      <el-col :span="7">
                        <el-form-item>
                          <el-input v-model="item.preDeduction"
                                    placeholder="请输入砍头息"
                                    size="medium">
                            <template slot="append">%</template>
                          </el-input>
                        </el-form-item>
                      </el-col>
                      <el-col class="line"
                              :span="2"
                              style="text-align: center">返</el-col>
                      <el-col :span="6">
                        <el-form-item>
                          <el-input v-model.number="item.preDeductionReturn"
                                    placeholder="返平台"
                                    size="medium">
                            <template slot="append">%</template>
                          </el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-form-item>
                </el-form>
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </el-form-item>
        <el-form-item label="GPS"
                      required>
          <el-form>
            <el-form-item>
              <el-col>
                <el-radio v-model="product.gpsType"
                          label="2"
                          border>不可融</el-radio>
                <el-radio v-model="product.gpsType"
                          label="1"
                          border>可融</el-radio>
              </el-col>
            </el-form-item>
            <el-form-item v-if="product.gpsType === '2'">
              <el-col :span="7">
                <el-input v-model.number="product.gpsQuota"
                          size="medium">
                  <template slot="append">元</template>
                </el-input>
              </el-col>
            </el-form-item>
            <el-form-item v-if="product.gpsType === '1'">
              <el-row>
                <el-col :span="7">
                  <el-form label-width="70px">
                    <el-form-item label="可融比">
                      <el-input v-model.number="product.gpsFinanceRate"
                                size="medium">
                        <template slot="append">%</template>
                      </el-input>
                    </el-form-item>
                  </el-form>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="15">
                  <el-tabs v-model="gpsTabValue"
                           type="border-card"
                           addable
                           @tab-add="addGpsTab(gpsTabValue)"
                           @tab-remove="removeGpsTab">
                    <el-tab-pane v-for="(item, index) in gpsTabs"
                                 closable
                                 :key="index"
                                 :name="item.index">
                      <template slot="label">
                        <div class="tab-label">
                          <el-input v-model.number="item.loanLower"
                                    size="mini">
                            <template slot="append">元</template>
                          </el-input>
                          <span>~</span>
                          <el-input v-model.number="item.loanUpper"
                                    size="mini">
                            <template slot="append">元</template>
                          </el-input>
                        </div>
                      </template>
                      <template v-for="(gpsItem, key) in item.gpsLoop">
                        <el-col :key="key">
                          <el-col :span="10">
                            <el-form-item>
                              <el-input v-model.number="gpsItem.quota"
                                        size="medium">
                                <template slot="append">元</template>
                              </el-input>
                            </el-form-item>
                          </el-col>
                          <el-col class="line"
                                  :span="2"
                                  style="text-align: center">返</el-col>
                          <el-col :span="10">
                            <el-form-item>
                              <el-input v-model.number="gpsItem.gpsReturn"
                                        size="medium">
                                <template slot="append">元</template>
                              </el-input>
                            </el-form-item>
                          </el-col>
                          <el-col :span="1">
                            <el-button icon="el-icon-plus"
                                       type="primary"
                                       circle
                                       size="mini"
                                       v-if="key < 1"
                                       @click="() => { item.gpsLoop.push({}) }"></el-button>
                          </el-col>
                          <el-col :span="1">
                            <el-button icon="el-icon-minus"
                                       type="danger"
                                       circle
                                       size="mini"
                                       v-if="key < 1"
                                       @click="() => { item.gpsLoop.length>1?item.gpsLoop.pop():null }"></el-button>
                          </el-col>
                        </el-col>
                      </template>
                    </el-tab-pane>
                  </el-tabs>
                </el-col>
              </el-row>
            </el-form-item>
          </el-form>
        </el-form-item>
        <el-form-item label="保险"
                      required>
          <el-form>
            <el-form-item>
              <el-col>
                <el-radio v-model="product.insuranceType"
                          label="2"
                          border>不可融</el-radio>
                <el-radio v-model="product.insuranceType"
                          label="1"
                          border>可融</el-radio>
              </el-col>
            </el-form-item>
            <el-form-item v-if="product.insuranceType === '1'">
              <el-col :span="7">
                <el-form label-width="70px">
                  <el-form-item label="可融比">
                    <el-input v-model.number="product.ifinanceRate"
                              size="medium">
                      <template slot="append">%</template>
                    </el-input>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-form-item>
          </el-form>
        </el-form-item>
        <el-form-item label="购置税"
                      required>
          <el-form>
            <el-form-item>
              <el-col>
                <el-radio v-model="product.purchaseTaxType"
                          label="2"
                          border>不可融</el-radio>
                <el-radio v-model="product.purchaseTaxType"
                          label="1"
                          border>可融</el-radio>
              </el-col>
            </el-form-item>
            <el-form-item v-if="product.purchaseTaxType === '1'">
              <el-row>
                <el-col :span="7">
                  <el-form label-width="70px">
                    <el-form-item label="可融比">
                      <el-input v-model.number="product.ptfinanceRate"
                                size="medium">
                        <template slot="append">%</template>
                      </el-input>
                    </el-form-item>
                  </el-form>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="7">
                  <el-form label-width="80px">
                    <el-form-item label="结算费率">
                      <el-input v-model.number="product.balanceRate"
                                size="medium">
                        <template slot="append">%</template>
                      </el-input>
                    </el-form-item>
                  </el-form>
                </el-col>
              </el-row>
            </el-form-item>
          </el-form>
        </el-form-item>
        <el-form-item label="产品信用等级"
                      required>
          <el-radio v-model="product.grade"
                    label="A"
                    border>A级(信用极好)</el-radio>
          <el-radio v-model="product.grade"
                    label="B"
                    border>B级(信用优秀)</el-radio>
          <el-radio v-model="product.grade"
                    label="C"
                    border>C级(信用良好)</el-radio>
          <el-radio v-model="product.grade"
                    label="D"
                    border>D级(信用中等)</el-radio>
          <el-radio v-model="product.grade"
                    label="E"
                    border>E级(信用不好)</el-radio>
        </el-form-item>
        <el-form-item label="提前还款"
                      required>
          <el-radio v-model="product.earlyRepayment"
                    label="有违约金"
                    border>有违约金</el-radio>
          <el-radio v-model="product.earlyRepayment"
                    label="无违约金"
                    border>无违约金</el-radio>
        </el-form-item>
        <el-form-item label="资质要求"
                      required>
          <el-checkbox-group v-model="product.qualify">
            <el-checkbox label="大数据">大数据</el-checkbox>
            <el-checkbox label="征信">征信</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="牌照"
                      required>
          <el-checkbox-group v-model="product.licenseTags">
            <el-checkbox label="公牌">公牌</el-checkbox>
            <el-checkbox label="私牌">私牌</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="单双签"
                      required>
          <el-form>
            <el-form-item>
              <el-col :span="7">
                <el-input v-model.number="product.signQuota"
                          size="medium">
                  <template slot="append">元</template>
                </el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="单签"
                          class="no-before">
              <el-checkbox-group v-model="product.singleSign">
                <el-checkbox label="两证一卡"
                             border>两证一卡</el-checkbox>
                <el-checkbox label="房产"
                             border>房产</el-checkbox>
                <el-checkbox label="流水"
                             border>流水</el-checkbox>
                <el-checkbox label="征信"
                             border>征信</el-checkbox>
                <el-checkbox label="居住证明"
                             border>居住证明</el-checkbox>
                <el-checkbox label="家访"
                             border>家访</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="双签"
                          class="no-before">
              <el-checkbox-group v-model="product.doubleSign">
                <el-checkbox label="两证一卡"
                             border>两证一卡</el-checkbox>
                <el-checkbox label="房产"
                             border>房产</el-checkbox>
                <el-checkbox label="流水"
                             border>流水</el-checkbox>
                <el-checkbox label="征信"
                             border>征信</el-checkbox>
                <el-checkbox label="居住证明"
                             border>居住证明</el-checkbox>
                <el-checkbox label="家访"
                             border>家访</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-form>
        </el-form-item>
        <el-form-item label="产品优势"
                      required>
          <el-checkbox-group v-model="product.advantages">
            <el-checkbox label="额度大">额度大</el-checkbox>
            <el-checkbox label="手续简单">手续简单</el-checkbox>
            <el-checkbox label="可黑户">可黑户</el-checkbox>
            <el-checkbox label="0首付">0首付</el-checkbox>
            <el-checkbox label="60期分期">60期分期</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="备注"
                      required>
          <el-col :span="15">
            <el-form-item>
              <el-input type="textarea"
                        maxlength="45"
                        v-model="product.qualifications"
                        placeholder="45字以内"></el-input>
            </el-form-item>
          </el-col>
        </el-form-item>
      </div>
      <div class="breach-area">
        <div class="title">
          <div class="point"></div>
          <span>进件材料</span>
        </div>
        <el-form-item label="业务类型"
                      required>
          <el-col>
            <el-radio v-model="product.sufProcessType"
                      label=1
                      border>先放款后抵押</el-radio>
            <el-radio v-model="product.sufProcessType"
                      label=2
                      border>先抵押后放款</el-radio>
            <el-radio v-model="product.sufProcessType"
                      label=3
                      border>快速放款</el-radio>
          </el-col>
        </el-form-item>
        <el-form-item label="审核步骤"
                      required>
          <el-col>
            <el-radio v-model="product.examineType"
                      label=1
                      @change="() => { product.firstAttrsList = [] }"
                      border>一次审核</el-radio>
            <el-radio v-model="product.examineType"
                      label=2
                      border>二次审核</el-radio>
          </el-col>
        </el-form-item>
        <transition name="el-fade-in-linear">
          <el-form-item v-if="!product.examineType || product.examineType!=1"
                        label="预审资料">
            <el-col :span="20">
              <el-collapse accordion>
                <el-collapse-item>
                  <template slot="title">
                    <div class="collapse-item-title"><span>主贷人材料</span></div>
                  </template>
                  <el-checkbox-group v-model="product.firstAttrsList">
                    <el-col class="checkbox-item"
                            :span="4"
                            v-for="(item, key) in productMaterial.mainLender"
                            :key="key">
                      <el-button v-if="item.dataAttrId==='add'"
                                 icon="el-icon-plus"
                                 type="primary"
                                 circle
                                 size="mini"
                                 @click="addLender('mainLender', 1)"></el-button>
                      <el-tooltip v-else
                                  effect="dark"
                                  :content="item.name"
                                  placement="top">
                        <el-checkbox :label="JSON.stringify({dataAttrId:item.dataAttrId,targetType:item.targetType})"
                                     :disabled="checkDisabled(item, [loanTabs.flatMap(a=>a.lastAttrsList), loanTabs.flatMap(a=>a.afterLoanAttrsList), loanTabs.flatMap(a=>a.mortgageAttrsList)])">{{ item.name }}</el-checkbox>
                      </el-tooltip>
                    </el-col>
                  </el-checkbox-group>
                  <template v-if="productMaterial.mainLender.length%6 !== 0">
                    <el-col class="checkbox-item"
                            :span="4"
                            v-for="(item, key) in 6 - productMaterial.mainLender.length%6"
                            :key="key">
                    </el-col>
                  </template>
                </el-collapse-item>
                <el-collapse-item>
                  <template slot="title">
                    <div class="collapse-item-title"><span>配偶材料</span></div>
                  </template>
                  <el-checkbox-group v-model="product.firstAttrsList">
                    <el-col class="checkbox-item"
                            :span="4"
                            v-for="(item, key) in productMaterial.mateLender"
                            :key="key">
                      <el-button v-if="item.dataAttrId==='add'"
                                 icon="el-icon-plus"
                                 type="primary"
                                 circle
                                 size="mini"
                                 @click="addLender('mateLender', 2)"></el-button>
                      <el-tooltip v-else
                                  effect="dark"
                                  :content="item.name"
                                  placement="top">
                        <el-checkbox :label="JSON.stringify({dataAttrId:item.dataAttrId,targetType:item.targetType})"
                                     :disabled="checkDisabled(item, [loanTabs.flatMap(a=>a.lastAttrsList), loanTabs.flatMap(a=>a.afterLoanAttrsList), loanTabs.flatMap(a=>a.mortgageAttrsList)])">{{ item.name }}</el-checkbox>
                      </el-tooltip>
                    </el-col>
                  </el-checkbox-group>
                  <template v-if="productMaterial.mateLender.length%6 !== 0">
                    <el-col class="checkbox-item"
                            :span="4"
                            v-for="(item, key) in 6 - productMaterial.mateLender.length%6"
                            :key="key">
                    </el-col>
                  </template>
                </el-collapse-item>
                <el-collapse-item>
                  <template slot="title">
                    <div class="collapse-item-title"><span>担保人材料</span></div>
                  </template>
                  <el-checkbox-group v-model="product.firstAttrsList">
                    <el-col class="checkbox-item"
                            :span="4"
                            v-for="(item, key) in productMaterial.guarantorLender"
                            :key="key">
                      <el-button v-if="item.dataAttrId==='add'"
                                 icon="el-icon-plus"
                                 type="primary"
                                 circle
                                 size="mini"
                                 @click="addLender('guarantorLender', 3)"></el-button>
                      <el-tooltip v-else
                                  effect="dark"
                                  :content="item.name"
                                  placement="top">
                        <el-checkbox :label="JSON.stringify({dataAttrId:item.dataAttrId,targetType:item.targetType})"
                                     :disabled="checkDisabled(item, [loanTabs.flatMap(a=>a.lastAttrsList), loanTabs.flatMap(a=>a.afterLoanAttrsList), loanTabs.flatMap(a=>a.mortgageAttrsList)])">{{ item.name }}</el-checkbox>
                      </el-tooltip>
                    </el-col>
                  </el-checkbox-group>
                  <template v-if="productMaterial.guarantorLender.length%6 !== 0">
                    <el-col class="checkbox-item"
                            :span="4"
                            v-for="(item, key) in 6 - productMaterial.guarantorLender.length%6"
                            :key="key">
                    </el-col>
                  </template>
                </el-collapse-item>
                <el-collapse-item>
                  <template slot="title">
                    <div class="collapse-item-title"><span>担保人配偶材料</span></div>
                  </template>
                  <el-checkbox-group v-model="product.firstAttrsList">
                    <el-col class="checkbox-item"
                            :span="4"
                            v-for="(item, key) in productMaterial.guarantorMateLender"
                            :key="key">
                      <el-button v-if="item.dataAttrId==='add'"
                                 icon="el-icon-plus"
                                 type="primary"
                                 circle
                                 size="mini"
                                 @click="addLender('guarantorMateLender', 4)"></el-button>
                      <el-tooltip v-else
                                  effect="dark"
                                  :content="item.name"
                                  placement="top">
                        <el-checkbox :label="JSON.stringify({dataAttrId:item.dataAttrId,targetType:item.targetType})"
                                     :disabled="checkDisabled(item, [loanTabs.flatMap(a=>a.lastAttrsList), loanTabs.flatMap(a=>a.afterLoanAttrsList), loanTabs.flatMap(a=>a.mortgageAttrsList)])">{{ item.name }}</el-checkbox>
                      </el-tooltip>
                    </el-col>
                  </el-checkbox-group>
                  <template v-if="productMaterial.guarantorMateLender.length%6 !== 0">
                    <el-col class="checkbox-item"
                            :span="4"
                            v-for="(item, key) in 6 - productMaterial.guarantorMateLender.length%6"
                            :key="key">
                    </el-col>
                  </template>
                </el-collapse-item>
              </el-collapse>
            </el-col>
          </el-form-item>
        </transition>
        <el-form-item>
          <el-col :span="20">
            <el-tabs v-model="dataTabValue"
                     type="border-card"
                     addable
                     @tab-add="addDataTab(dataTabValue)"
                     @tab-remove="removeDataTab">
              <el-tab-pane v-for="(item, index) in loanTabs"
                           closable
                           :key="index"
                           :name="item.index">
                <template slot="label">
                  <div class="tab-label">
                    <el-input v-model.number="item.loanLower"
                              size="mini">
                      <template slot="append">元</template>
                    </el-input>
                    <span>~</span>
                    <el-input v-model.number="item.loanUpper"
                              size="mini">
                      <template slot="append">元</template>
                    </el-input>
                  </div>
                </template>
                <el-form>
                  <el-form-item label="终审资料">
                    <el-col :span="22">
                      <el-collapse accordion>
                        <el-collapse-item>
                          <template slot="title">
                            <div class="collapse-item-title"><span>主贷人材料</span></div>
                          </template>
                          <el-checkbox-group v-model="item.lastAttrsList">
                            <el-col class="checkbox-item"
                                    :span="4"
                                    v-for="(lenderItem, key) in productMaterial.mainLender"
                                    :key="key">
                              <el-button v-if="lenderItem.dataAttrId==='add'"
                                         icon="el-icon-plus"
                                         type="primary"
                                         circle
                                         size="mini"
                                         @click="addLender('mainLender', 1)"></el-button>
                              <el-tooltip v-else
                                          effect="dark"
                                          :content="lenderItem.name"
                                          placement="top">
                                <el-checkbox :label="JSON.stringify({dataAttrId:lenderItem.dataAttrId,targetType:lenderItem.targetType})"
                                             :disabled="checkDisabled(lenderItem, [product.firstAttrsList, item.afterLoanAttrsList, item.mortgageAttrsList])">{{ lenderItem.name }}</el-checkbox>
                              </el-tooltip>
                            </el-col>
                          </el-checkbox-group>
                          <template v-if="productMaterial.mainLender.length%6 !== 0">
                            <el-col class="checkbox-item"
                                    :span="4"
                                    v-for="(item, key) in 6 - productMaterial.mainLender.length%6"
                                    :key="key">
                            </el-col>
                          </template>
                        </el-collapse-item>
                        <el-collapse-item>
                          <template slot="title">
                            <div class="collapse-item-title"><span>配偶材料</span></div>
                          </template>
                          <el-checkbox-group v-model="item.lastAttrsList">
                            <el-col class="checkbox-item"
                                    :span="4"
                                    v-for="(lenderItem, key) in productMaterial.mateLender"
                                    :key="key">
                              <el-button v-if="lenderItem.dataAttrId==='add'"
                                         icon="el-icon-plus"
                                         type="primary"
                                         circle
                                         size="mini"
                                         @click="addLender('mateLender', 2)"></el-button>
                              <el-tooltip v-else
                                          effect="dark"
                                          :content="lenderItem.name"
                                          placement="top">
                                <el-checkbox :label="JSON.stringify({dataAttrId:lenderItem.dataAttrId,targetType:lenderItem.targetType})"
                                             :disabled="checkDisabled(lenderItem, [product.firstAttrsList, item.afterLoanAttrsList, item.mortgageAttrsList])">{{ lenderItem.name }}</el-checkbox>
                              </el-tooltip>
                            </el-col>
                          </el-checkbox-group>
                          <template v-if="productMaterial.mateLender.length%6 !== 0">
                            <el-col class="checkbox-item"
                                    :span="4"
                                    v-for="(item, key) in 6 - productMaterial.mateLender.length%6"
                                    :key="key">
                            </el-col>
                          </template>
                        </el-collapse-item>
                        <el-collapse-item>
                          <template slot="title">
                            <div class="collapse-item-title"><span>担保人材料</span></div>
                          </template>
                          <el-checkbox-group v-model="item.lastAttrsList">
                            <el-col class="checkbox-item"
                                    :span="4"
                                    v-for="(lenderItem, key) in productMaterial.guarantorLender"
                                    :key="key">
                              <el-button v-if="lenderItem.dataAttrId==='add'"
                                         icon="el-icon-plus"
                                         type="primary"
                                         circle
                                         size="mini"
                                         @click="addLender('guarantorLender', 3)"></el-button>
                              <el-tooltip v-else
                                          effect="dark"
                                          :content="lenderItem.name"
                                          placement="top">
                                <el-checkbox :label="JSON.stringify({dataAttrId:lenderItem.dataAttrId,targetType:lenderItem.targetType})"
                                             :disabled="checkDisabled(lenderItem, [product.firstAttrsList, item.afterLoanAttrsList, item.mortgageAttrsList])">{{ lenderItem.name }}</el-checkbox>
                              </el-tooltip>
                            </el-col>
                          </el-checkbox-group>
                          <template v-if="productMaterial.guarantorLender.length%6 !== 0">
                            <el-col class="checkbox-item"
                                    :span="4"
                                    v-for="(item, key) in 6 - productMaterial.guarantorLender.length%6"
                                    :key="key">
                            </el-col>
                          </template>
                        </el-collapse-item>
                        <el-collapse-item>
                          <template slot="title">
                            <div class="collapse-item-title"><span>担保人配偶材料</span></div>
                          </template>
                          <el-checkbox-group v-model="item.lastAttrsList">
                            <el-col class="checkbox-item"
                                    :span="4"
                                    v-for="(lenderItem, key) in productMaterial.guarantorMateLender"
                                    :key="key">
                              <el-button v-if="lenderItem.dataAttrId==='add'"
                                         icon="el-icon-plus"
                                         type="primary"
                                         circle
                                         size="mini"
                                         @click="addLender('guarantorMateLender', 4)"></el-button>
                              <el-tooltip v-else
                                          effect="dark"
                                          :content="lenderItem.name"
                                          placement="top">
                                <el-checkbox :label="JSON.stringify({dataAttrId:lenderItem.dataAttrId,targetType:lenderItem.targetType})"
                                             :disabled="checkDisabled(lenderItem, [product.firstAttrsList, item.afterLoanAttrsList, item.mortgageAttrsList])">{{ lenderItem.name }}</el-checkbox>
                              </el-tooltip>
                            </el-col>
                          </el-checkbox-group>
                          <template v-if="productMaterial.guarantorMateLender.length%6 !== 0">
                            <el-col class="checkbox-item"
                                    :span="4"
                                    v-for="(item, key) in 6 - productMaterial.guarantorMateLender.length%6"
                                    :key="key">
                            </el-col>
                          </template>
                        </el-collapse-item>
                        <el-collapse-item>
                          <template slot="title">
                            <div class="collapse-item-title"><span>车辆材料</span></div>
                          </template>
                          <el-checkbox-group v-model="item.lastAttrsList">
                            <el-col class="checkbox-item"
                                    :span="4"
                                    v-for="(lenderItem, key) in productMaterial.carLender"
                                    :key="key">
                              <el-button v-if="lenderItem.dataAttrId==='add'"
                                         icon="el-icon-plus"
                                         type="primary"
                                         circle
                                         size="mini"
                                         @click="addLender('carLender', 9)"></el-button>
                              <el-tooltip v-else
                                          effect="dark"
                                          :content="lenderItem.name"
                                          placement="top">
                                <el-checkbox :label="JSON.stringify({dataAttrId:lenderItem.dataAttrId,targetType:lenderItem.targetType})"
                                             :disabled="checkDisabled(lenderItem, [product.firstAttrsList, item.afterLoanAttrsList, item.mortgageAttrsList])">{{ lenderItem.name }}</el-checkbox>
                              </el-tooltip>
                            </el-col>
                          </el-checkbox-group>
                          <template v-if="productMaterial.carLender.length%6 !== 0">
                            <el-col class="checkbox-item"
                                    :span="4"
                                    v-for="(item, key) in 6 - productMaterial.carLender.length%6"
                                    :key="key">
                            </el-col>
                          </template>
                        </el-collapse-item>
                      </el-collapse>
                    </el-col>
                  </el-form-item>
                  <el-form-item label="放款资料">
                    <el-col :span="22">
                      <el-collapse accordion>
                        <el-collapse-item>
                          <template slot="title">
                            <div class="collapse-item-title"><span>放款资料</span></div>
                          </template>
                          <el-checkbox-group v-model="item.afterLoanAttrsList">
                            <el-col class="checkbox-item"
                                    :span="4"
                                    v-for="(lenderItem, key) in productMaterial.afterLoanLender"
                                    :key="key">
                              <el-button v-if="lenderItem.dataAttrId==='add'"
                                         icon="el-icon-plus"
                                         type="primary"
                                         circle
                                         size="mini"
                                         @click="addLender('afterLoanLender', 1)"></el-button>
                              <el-tooltip v-else
                                          effect="dark"
                                          :content="lenderItem.name"
                                          placement="top">
                                <el-checkbox :label="JSON.stringify({dataAttrId:lenderItem.dataAttrId,targetType:lenderItem.targetType})"
                                             :disabled="checkDisabled(lenderItem, [product.firstAttrsList, item.lastAttrsList, item.mortgageAttrsList])">{{ lenderItem.name }}</el-checkbox>
                              </el-tooltip>
                            </el-col>
                          </el-checkbox-group>
                          <template v-if="productMaterial.afterLoanLender.length%6 !== 0">
                            <el-col class="checkbox-item"
                                    :span="4"
                                    v-for="(item, key) in 6 - productMaterial.afterLoanLender.length%6"
                                    :key="key">
                            </el-col>
                          </template>
                        </el-collapse-item>
                      </el-collapse>
                    </el-col>
                  </el-form-item>
                  <el-form-item label="抵押材料">
                    <el-col :span="22">
                      <el-collapse accordion>
                        <el-collapse-item>
                          <template slot="title">
                            <div class="collapse-item-title"><span>抵押材料</span></div>
                          </template>
                          <el-checkbox-group v-model="item.mortgageAttrsList">
                            <el-col class="checkbox-item"
                                    :span="4"
                                    v-for="(lenderItem, key) in productMaterial.mortgageLender"
                                    :key="key">
                              <el-button v-if="lenderItem.dataAttrId==='add'"
                                         icon="el-icon-plus"
                                         type="primary"
                                         circle
                                         size="mini"
                                         @click="addLender('mortgageLender', 1)"></el-button>
                              <el-tooltip v-else
                                          effect="dark"
                                          :content="lenderItem.name"
                                          placement="top">
                                <el-checkbox :label="JSON.stringify({dataAttrId:lenderItem.dataAttrId,targetType:lenderItem.targetType})"
                                             :disabled="checkDisabled(lenderItem, [product.firstAttrsList, item.lastAttrsList, item.afterLoanAttrsList])">
                                  {{ lenderItem.name }}
                                </el-checkbox>
                              </el-tooltip>
                            </el-col>
                          </el-checkbox-group>
                          <template v-if="productMaterial.mortgageLender.length%6 !== 0">
                            <el-col class="checkbox-item"
                                    :span="4"
                                    v-for="(item, key) in 6 - productMaterial.mortgageLender.length%6"
                                    :key="key">
                            </el-col>
                          </template>
                        </el-collapse-item>
                      </el-collapse>
                    </el-col>
                  </el-form-item>
                </el-form>
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </el-form-item>
        <file-pic-up v-for="item in fileUploadList"
                     :key="item.dataAttrId"
                     :label-name="item.explain"
                     :file-name="'--' + item.explain || ''"
                     :product-name="product.productName"
                     :file-list="item.fileList"
                     :file-path.sync="item.filePath"
                     :example-loop.sync="item.exampleLoop"
                     @show="showImg"></file-pic-up>
        <video-view-up v-for="item in videoUploadList"
                       :key="item.dataAttrId"
                       :label-name="item.explain"
                       :upload-data="{videoName: 'video/' + item.explain}"
                       :video-list.sync="item.videoList"
                       :can-upload="true"></video-view-up>
        <el-form-item v-if="product.firstAttrsList.some(a => JSON.parse(a).dataAttrId===19 || JSON.parse(a).dataAttrId===57)
          || loanTabs.flatMap(a=>a.lastAttrsList).some(a => JSON.parse(a).dataAttrId===19 || JSON.parse(a).dataAttrId===57)
          || loanTabs.flatMap(a=>a.afterLoanAttrsList).some(a => JSON.parse(a).dataAttrId===19 || JSON.parse(a).dataAttrId===57)
          || loanTabs.flatMap(a=>a.mortgageAttrsList).some(a => JSON.parse(a).dataAttrId===19 || JSON.parse(a).dataAttrId===57)"
                      label="保险单特别约定">
          <el-col :span="7">
            <el-input v-model="product.beneficiary"
                      size="medium"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="开户信息">
          <el-form>
            <el-form-item>
              <el-col>
                <el-radio v-model="product.accountTime"
                          label="1"
                          border>预审后</el-radio>
                <el-radio v-model="product.accountTime"
                          label="2"
                          border>终审后</el-radio>
              </el-col>
            </el-form-item>
            <el-form-item>
              <template v-for="(item, key) in accountInfo">
                <el-col :key="key">
                  <el-col :span="6">
                    <el-form-item>
                      <el-input v-model.number="item.title"
                                size="medium"
                                placeholder="标题">
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item>
                      <el-input v-model.number="item.url"
                                size="medium"
                                placeholder="链接">
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item>
                      <el-input v-model.number="item.info"
                                size="medium"
                                placeholder="备注">
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="1">
                    <el-button icon="el-icon-plus"
                               type="primary"
                               circle
                               size="mini"
                               v-if="key < 1"
                               @click="() => { accountInfo.push({}) }"></el-button>
                  </el-col>
                  <el-col :span="1">
                    <el-button icon="el-icon-minus"
                               type="danger"
                               circle
                               size="mini"
                               v-if="key < 1"
                               @click="() => { accountInfo.length>1?accountInfo.pop():null }"></el-button>
                  </el-col>
                </el-col>
              </template>
            </el-form-item>
          </el-form>
        </el-form-item>
      </div>
      <div class="product-area">
        <div class="title">
          <div class="point"></div>
          <span>业务审核流程</span>
        </div>
        <el-form-item>
          <template>
            <el-row>
              <el-col :span="13">
                <el-transfer v-model="processChecked"
                             target-order="push"
                             @change="processChange"
                             :titles="[ '全部流程', '选中的流程' ]"
                             :data="processData"></el-transfer>
              </el-col>
              <el-col :span="11"
                      :pull="5">
                <div style="overflow:auto; height:280px;">
                  <el-form-item v-for="(item, key) in product.processList"
                                :key="key"
                                :label="item.label">
                    <el-input v-model="item.mark"
                              placeholder="请输入"
                              size="medium"></el-input>
                  </el-form-item>
                </div>
              </el-col>
            </el-row>
          </template>
        </el-form-item>
      </div>
      <div class="foot">
        <el-form-item>
          <el-button type="primary"
                     @click="publishProduct">发布</el-button>
          <el-button @click="() => {this.$router.go(-1)}">取消</el-button>
        </el-form-item>
      </div>
    </el-form>
    <el-dialog title="新增材料"
               :visible.sync="lenderDialog">
      <el-checkbox-group v-model="newLenderPool.lenderCheckedList"
                         @change="lenderChecked=false">
        <el-tabs tab-position="left"
                 type="border-card"
                 style="height: 500px;overflow-y: scroll;">
          <el-tab-pane label="文本">
            <el-col :span="11"
                    v-for="(item, key) in newLenderPool.textLenders"
                    :key="key"
                    class="add-lender-item">
              <el-col :span="1">
                <el-checkbox :label="item.key"
                             :checked="lenderChecked"
                             @change="lenderChecked=!lenderChecked"
                             class="add-lender-checkbox"></el-checkbox>
              </el-col>
              <el-col :span="10">
                <el-input v-model="item.attrName"
                          :disabled="item.cantEdit"
                          size="mini">
                </el-input>
              </el-col>
            </el-col>
            <el-col :span="11"
                    class="add-lender-item">
              <el-button @click="pushLenderPool('textLenders', 4)"
                         size="mini"
                         type="primary">新增</el-button>
            </el-col>
          </el-tab-pane>
          <el-tab-pane label="图片">
            <el-col :span="11"
                    v-for="(item, key) in newLenderPool.picLenders"
                    :key="key"
                    class="add-lender-item">
              <el-row>
                <el-col :span="1"
                        class="fix-down">
                  <el-checkbox :label="item.key"
                               :checked="lenderChecked"
                               @change="lenderChecked=!lenderChecked"
                               class="add-lender-checkbox"></el-checkbox>
                </el-col>
                <el-col :span="10"
                        class="fix-down">
                  <el-input v-model="item.attrName"
                            :disabled="item.cantEdit"
                            size="mini">
                  </el-input>
                </el-col>
              </el-row>
              <el-row class="fix-upload">
                <el-col :span="6"
                        v-for="(exItem, exIndex) in item.exampleLoop"
                        :key="exIndex">
                  <pic-view :pic-url-list.sync="exItem.urls"
                            upload-class="short-upload"
                            :pic-name-list.sync="exItem.names"
                            :upload-data="{ picName: item.key }"
                            :group-index="exIndex"
                            :out-group-index="key"
                            :upload-type="item.cantEdit"
                            :max-size="1"
                            @showImg="showImg"
                            @lenderTrans="trans"></pic-view>
                  <div class="stalker">
                    <el-input placeholder="输入注释"
                              :disabled="item.cantEdit"
                              size="mini"
                              v-model="exItem.display"></el-input>
                  </div>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="11"
                    class="add-lender-item">
              <el-button @click="pushLenderPool('picLenders', 3)"
                         size="mini"
                         type="primary"
                         class="fix-down">新增</el-button>
            </el-col>
          </el-tab-pane>
          <el-tab-pane label="视频">
            <el-col :span="11"
                    v-for="(item, key) in newLenderPool.videoLenders"
                    :key="key"
                    class="add-lender-item">
              <el-col :span="1">
                <el-checkbox :label="item.key"
                             :checked="lenderChecked"
                             @change="lenderChecked=!lenderChecked"
                             class="add-lender-checkbox"></el-checkbox>
              </el-col>
              <el-col :span="10">
                <el-input v-model="item.attrName"
                          :disabled="item.cantEdit"
                          size="mini">
                </el-input>
              </el-col>
            </el-col>
            <el-col :span="11"
                    class="add-lender-item">
              <el-button @click="pushLenderPool('videoLenders', 7)"
                         size="mini"
                         type="primary">新增</el-button>
            </el-col>
          </el-tab-pane>
          <el-tab-pane label="文件">
            <el-col :span="11"
                    v-for="(item, key) in newLenderPool.fileLenders"
                    :key="key"
                    class="add-lender-item">
              <el-col :span="1">
                <el-checkbox :label="item.key"
                             :checked="lenderChecked"
                             @change="lenderChecked=!lenderChecked"
                             class="add-lender-checkbox">item.key</el-checkbox>
              </el-col>
              <el-col :span="10">
                <el-input v-model="item.attrName"
                          :disabled="item.cantEdit"
                          size="mini">
                </el-input>
              </el-col>
            </el-col>
            <el-col :span="11"
                    class="add-lender-item">
              <el-button @click="pushLenderPool('fileLenders', 6)"
                         size="mini"
                         type="primary">新增</el-button>
            </el-col>
          </el-tab-pane>
        </el-tabs>
      </el-checkbox-group>
      <div class="foot">
        <el-button @click="buildLender"
                   type="primary">确认</el-button>
        <el-button @click="lenderDialog = false"
                   plain>取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style lang="scss">
.foot {
  padding-left: 30%;
}
.out-form {
  background-color: #f3f3f4;
}
.el-carousel__item:nth-child(2n) {
  & > .el-form {
    background-color: #99a9bf;
  }
}
.el-carousel__item:nth-child(2n + 1) {
  & > .el-form {
    background-color: #d3dce6;
  }
}
.add-lender-item {
  padding: 5px 10px;
  background-color: #eee;
  margin: 5px 5px;
  & > div .fix-down {
    margin-top: 22px;
  }
  & > .fix-upload {
    margin-top: 5px;
  }
}
.add-lender-checkbox {
  margin: 4px 0 0 0 !important;
  & > .el-checkbox__label {
    display: none !important;
  }
}
.stalker {
  width: 79px;
}
.short-upload div {
  height: 79px;
}
</style>

<script>
import '@/style/common.scss'
import '@/style/info.scss'
import 'element-ui/lib/theme-chalk/base.css'
import picView from '@/components/pic-viewer-up'
import vViewer from '@/components/v-viewer'
import filePicUp from '@/components/file-pic-up'
import videoViewUp from '@/components/video-viewer-up'
import { packageImgList } from '@/utils/imgPackage'
import { vListLength, validatenull, validateNumber } from '@/utils/validate'
import { api } from '@/api'
import { getToken } from '@/utils/auth'
import { HTTPSUCCESS, HTTPDATAFAIL, HTTPPARAMFAIL, HTTPUNKOWNFAIL } from '@/components/constant'
import { joinArray, checkDisabled } from '@/utils/tool'
import { devBaseURL } from '@/utils/http'
import { material, processData } from '@/utils/data'

export default {
  data() {
    return {
      lenderChecked: false,
      lenderDialog: false,
      productMaterial: material,
      isInfo: this.infoFlag === '1',
      processData: processData,
      processChecked: [],
      uploadPicAction: devBaseURL + 'sys/product/upload',
      uploadAction: devBaseURL + 'sys/supplier/upload',
      accountInfo: [{}],
      cityList: [],
      companyList: [],
      product: {
        area: '1',
        cityIds: [],
        firstAttrsList: [],
        advantages: [],
        doubleSign: [],
        singleSign: [],
        periods: [],
        licenseTags: [],
        qualify: []
      },
      dataTabValue: '0',
      periodTabValue: '0',
      gpsTabValue: '0',
      loanTabs: [{
        name: '0',
        lastAttrsList: [],
        afterLoanAttrsList: [],
        mortgageAttrsList: []
      }],
      periodTabs: [],
      gpsTabs: [{
        name: '0',
        gpsLoop: [{}]
      }],
      dataTabIndex: 1,
      gpsTabIndex: 1,
      newLenderPool: {
        lastIndex: 0,
        lenderCheckedList: [],
        textLenders: [],
        picLenders: [],
        videoLenders: [],
        fileLenders: []
      },
      fileAllList: [],
      videoAllList: [],
      fileUploadList: [],
      videoUploadList: []
    }
  },
  activated() {
    this.reload()
    this.getProductDetail()
    this.getCityList()
    this.getCompanyList()
    this.initialized()
  },
  watch: {
    fileNeedList: {
      handler: function() {
        const allList = JSON.parse(JSON.stringify(this.fileNeedList))
        const uploadList = allList.map(e => {
          if (this.fileUploadList.some(a => a.dataAttrId === e.dataAttrId)) {
            const ele = this.fileUploadList.filter(a => a.dataAttrId === e.dataAttrId)
            return ele[0]
          } else {
            return e
          }
        })
        this.fileUploadList = JSON.parse(JSON.stringify(uploadList))
      }
    },
    videoNeedList: {
      handler: function() {
        const allList = JSON.parse(JSON.stringify(this.videoNeedList))
        const uploadList = allList.map(e => {
          if (this.videoUploadList.some(a => a.dataAttrId === e.dataAttrId)) {
            const ele = this.videoUploadList.filter(a => a.dataAttrId === e.dataAttrId)
            return ele[0]
          } else {
            return e
          }
        })
        this.videoUploadList = JSON.parse(JSON.stringify(uploadList))
      }
    }
  },
  computed: {
    fileNeedList() {
      return this.fileAllList.map(e => { if ([this.product.firstAttrsList, this.loanTabs.flatMap(a => a.lastAttrsList), this.loanTabs.flatMap(a => a.afterLoanAttrsList), this.loanTabs.flatMap(a => a.mortgageAttrsList)].flatMap(f => f).some(g => JSON.parse(g).dataAttrId === e.dataAttrId)) { return e } }).filter(h => h != null)
    },
    videoNeedList() {
      return this.videoAllList.map(e => { if ([this.product.firstAttrsList, this.loanTabs.flatMap(a => a.lastAttrsList), this.loanTabs.flatMap(a => a.afterLoanAttrsList), this.loanTabs.flatMap(a => a.mortgageAttrsList)].flatMap(f => f).some(g => JSON.parse(g).dataAttrId === e.dataAttrId)) { return e } }).filter(h => h != null)
    }
  },
  components: { picView, vViewer, filePicUp, videoViewUp },
  methods: {
    getToken,
    vListLength,
    validatenull,
    joinArray,
    checkDisabled,
    reload() {
      this.gpsLoop = [{}]
      this.rateLoop = [{}]
      this.accountInfo = [{}]
      this.product = {
        area: '1',
        cityIds: [],
        firstAttrsList: [],
        advantages: [],
        doubleSign: [],
        singleSign: [],
        periods: [],
        licenseTags: [],
        qualify: []
      }
      this.periodTabs = []
      this.gpsTabs = [{
        name: '0',
        gpsLoop: [{}]
      }]
      this.loanTabs = [{
        name: '0',
        lastAttrsList: [],
        afterLoanAttrsList: [],
        mortgageAttrsList: []
      }]
      this.productMaterial = material
      this.dataTabIndex = 1
      this.gpsTabIndex = 1
    },
    initialized() {
      this.$http.get(api.SYS_PRODUCT_INITIALIZE_MATERIAL, { productId: this.$route.params.productId }).then(
        res => {
          if (res.code === HTTPSUCCESS) {
            const add = res.data
            if (!validatenull(this.$route.params.productId)) {
              const modifier = JSON.parse(JSON.stringify(material))
              modifier.mainLender.splice(modifier.mainLender.length - 1, 0, ...add.addMainLender)
              modifier.mateLender.splice(modifier.mateLender.length - 1, 0, ...add.addMateLender)
              modifier.guarantorLender.splice(modifier.guarantorLender.length - 1, 0, ...add.addGuarantorLender)
              modifier.guarantorMateLender.splice(modifier.guarantorMateLender.length - 1, 0, ...add.addGuarantorMateLender)
              modifier.carLender.splice(modifier.carLender.length - 1, 0, ...add.addCarLender)
              modifier.afterLoanLender.splice(modifier.afterLoanLender.length - 1, 0, ...add.addAfterLoanLender)
              modifier.mortgageLender.splice(modifier.mortgageLender.length - 1, 0, ...add.addMortgageLender)
              this.productMaterial = modifier
            }
            this.fileAllList = add.fileAllList
            this.videoAllList = add.videoAllList
          } else {
            this.$msg._message('查询失败 请联系系统管理员', 'error')
          }
        }
      )
    },
    getProductDetail() {
      if (!validatenull(this.$route.params.productId)) {
        this.$http._get(api.SYS_PRODUCT_DETAIL, this.$route.params.productId).then(
          res => {
            if (res.code === HTTPSUCCESS) {
              const detail = res.data
              this.fileAllList = detail.fileAllList || []
              this.videoAllList = detail.videoAllList || []
              this.gpsTabs = detail.gpsTabs || []
              this.accountInfo = res.data.accountInfo || [{}]
              this.periodTabs = res.data.periodTabs || [{}]
              if (res.data.loanTabs && res.data.loanTabs.length > 0) {
                this.loanTabs = res.data.loanTabs
              }
              if (!validatenull(detail.cityIds) && detail.cityIds.some(id => { return id === 1 })) {
                detail.area = '1'
                detail.cityIds = []
              } else {
                detail.area = '2'
              }
              detail.doubleSign = detail.doubleSign || []
              detail.singleSign = detail.singleSign || []
              detail.qualify = detail.qualify || []
              detail.firstAttrsList = detail.firstAttrsList || []
              detail.lastAttrsList = detail.lastAttrsList || []
              detail.afterLoanAttrsList = detail.afterLoanAttrsList || []
              this.product = detail
              if (detail.process) {
                const list1 = []
                const list2 = []
                const a = detail.process.split('&')
                a.forEach(e => {
                  const b = e.split(';')
                  list1.push({ label: b[0], mark: b[1] })
                  list2.push(b[0])
                })
                this.processChecked = list2
                this.product.processList = list1
              }
            } else {
              this.$msg._message('查询失败 请联系系统管理员', 'error')
            }
          }
        )
      }
    },
    getCityList() {
      this.$http.get(api.SYS_CITY_CITYS).then(
        res => {
          this.cityList = res.data
        }
      )
    },
    getCompanyList() {
      this.$http.get(api.SYS_SUPPLIER_ALL).then(
        res => {
          this.companyList = res.data
        }
      )
    },
    setDetail(supplierId) {
      const supplier = this.companyList.filter(item =>
        item.value === supplierId
      )
      this.product.supplierName = supplier[0].label
      this.product.manager = supplier[0].productManager
      this.product.managerPhone = supplier[0].phone
    },
    publishProduct() {
      if (validatenull(this.product.area)) return this.$msg._message('请选择区域', 'warning')
      if (this.product.area === '2' && validatenull(this.product.cityIds)) return this.$msg._message('请选择区域', 'warning')
      if (validatenull(this.product.supplierId)) return this.$msg._message('请选择金融公司', 'warning')
      if (validatenull(this.product.productName)) return this.$msg._message('请填写方案名称', 'warning')
      if (validatenull(this.product.loanUpper) || validatenull(this.product.loanLower)) return this.$msg._message('请填写贷款额度区间', 'warning')
      if (!validateNumber(this.product.loanUpper) || !validateNumber(this.product.loanLower)) return this.$msg._message('贷款额度区间必须为数字', 'warning')
      if (validatenull(this.product.downpayRatio)) return this.$msg._message('请填写首付比例', 'warning')
      if (!validateNumber(this.product.downpayRatio)) return this.$msg._message('首付比例必须为数字', 'warning')
      if (validatenull(this.product.gpsType)) return this.$msg._message('请选择GPS', 'warning')
      if ((this.product.gpsType === '2' && validatenull(this.product.gpsQuota))) return this.$msg._message('请填写不可融GPS额度', 'warning')
      if (this.product.gpsType === '1' && validatenull(this.product.gpsFinanceRate)) return this.$msg._message('请填写GPS可融比', 'warning')
      if (this.product.gpsType === '1' && validatenull(this.gpsTabs)) return this.$msg._message('请至少填写一个分段GPS', 'warning')
      if (this.product.gpsType === '1' && this.gpsTabs.some(a => validatenull(a.loanLower) || validatenull(a.loanUpper))) return this.$msg._message('请填写完整GPS分段金额', 'warning')
      if (this.product.gpsType === '1' && this.gpsTabs.some(a => a.gpsLoop.some(e => validatenull(e.quota) && validatenull(e.gpsReturn)))) return this.$msg._message('请填写完整GPS分段额度和返佣', 'warning')
      if (validatenull(this.product.insuranceType)) return this.$msg._message('请选择保险', 'warning')
      if (this.product.insuranceType === '1' && validatenull(this.product.ifinanceRate)) return this.$msg._message('请填写保险可融比', 'warning')
      if (validatenull(this.product.purchaseTaxType)) return this.$msg._message('请选择购置税', 'warning')
      if (this.product.purchaseTaxType === '1' && validatenull(this.product.balanceRate)) return this.$msg._message('请填写结算费率', 'warning')
      if (this.product.purchaseTaxType === '1' && validatenull(this.product.ptfinanceRate)) return this.$msg._message('请填写购置税可融比', 'warning')
      if (validatenull(this.product.periods)) return this.$msg._message('请选择分期', 'warning')
      if (!validatenull(this.product.periods)) {
        if (this.periodTabs.some(e => validatenull(e.rateType))) return this.$msg._message('请选择利率类型', 'warning')
        if (this.periodTabs.some(e => (e.rateType === 1 && e.rateLoop.some(a => { if (validatenull(a.interestRate) || validatenull(a.internalRatio)) return true })) ||
          (e.rateType === 2 && e.rateLoop.some(a => { if (validatenull(a.interestRate) || validatenull(a.internalRatio) || validatenull(a.returnPlatform)) return true })))) return this.$msg._message('请填写完整利率', 'warning')
        if (this.periodTabs.some(e => validatenull(e.serviceChargeType))) return this.$msg._message('请选择服务费', 'warning')
        if (this.periodTabs.some(e => e.serviceChargeType === 2 && validatenull(e.sCFinanceRate))) return this.$msg._message('请填写服务费可融比', 'warning')
        if (this.periodTabs.some(e => e.serviceChargeType === 2 && (e.chargeLoop.length > 1 && e.chargeLoop.some(a => validatenull(a.lower))))) return this.$msg._message('请填写完整车辆销售价', 'warning')
        if (this.periodTabs.some(e => e.serviceChargeType === 2 && (e.chargeLoop.some(a => validatenull(a.quota) && validatenull(a.percentage))))) return this.$msg._message('服务费的定额和百分比至少填写一个', 'warning')
        if (this.periodTabs.some(e => e.serviceChargeType === 2 && (e.chargeLoop.some(a => !validatenull(a.quota) && !validatenull(a.percentage) && validatenull(a.min))))) return this.$msg._message('服务费的定额和百分比都有，请勾选取最大值或是最小值', 'warning')
      }
      if (validatenull(this.product.grade)) return this.$msg._message('请选择产品信用等级', 'warning')
      if (validatenull(this.product.earlyRepayment)) return this.$msg._message('请选择提前还款有无违约金', 'warning')
      if (validatenull(this.product.qualify)) return this.$msg._message('请选择资质要求', 'warning')
      if (validatenull(this.product.licenseTags)) return this.$msg._message('请选择牌照', 'warning')
      if (validatenull(this.product.signQuota)) return this.$msg._message('请填写单双签临界额度', 'warning')
      if (validatenull(this.product.advantages)) return this.$msg._message('请选择产品优势', 'warning')
      if (validatenull(this.product.qualifications)) return this.$msg._message('请填写备注', 'warning')
      if (validatenull(this.product.sufProcessType)) return this.$msg._message('请勾选业务类型', 'warning')
      if (validatenull(this.product.examineType)) return this.$msg._message('请勾选审核流程', 'warning')
      if (this.product.examineType !== '1' && validatenull(this.product.firstAttrsList)) return this.$msg._message('请至少勾选主贷人需要的初审材料', 'warning')
      if (validatenull(this.loanTabs)) return this.$msg._message('请至少填写一个分段材料', 'warning')
      if (this.loanTabs.some(a => validatenull(a.loanLower) || validatenull(a.loanUpper))) return this.$msg._message('请至少填写完整材料分段金额', 'warning')
      if (this.loanTabs.some(a => validatenull(a.lastAttrsList))) return this.$msg._message('请至少勾选主贷人需要的终审材料', 'warning')
      if (!validatenull(this.product.firstAttrsList) && (this.product.firstAttrsList.some(a => JSON.parse(a).dataAttrId === 19) && validatenull(this.product.beneficiary))) return this.$msg._message('初审材料已经勾选保险单，请填写保险单特别约定', 'warning')
      if (this.loanTabs.some(a => validatenull(a.lastAttrsList)) && this.loanTabs.some(a => a.lastAttrsList.some(a => JSON.parse(a).dataAttrId === 19)) && validatenull(this.product.beneficiary)) return this.$msg._message('终审材料已经勾选保险单，请填写保险单特别约定', 'warning')
      if (this.loanTabs.some(a => validatenull(a.afterLoanAttrsList)) && this.loanTabs.some(a => a.afterLoanAttrsList.some(a => JSON.parse(a).dataAttrId === 19)) && validatenull(this.product.beneficiary)) return this.$msg._message('放款材料已经勾选保险单，请填写保险单特别约定', 'warning')
      if (validatenull(this.processChecked)) return this.$msg._message('请选择流程', 'warning')
      if (validatenull(this.fileUploadList)) {
        if (this.fileUploadList.some(e => validatenull(e.filePath))) return this.$msg._message('请上传文件', 'warning')
        this.fileUploadList.forEach(e => {
          if (e.exampleLoop && e.exampleLoop.some(a => (vListLength(a.names) && !validatenull(a.display)) || (!vListLength(a.names) && validatenull(a.display)))) return this.$msg._message('文件示例和描述需要填写完整！', 'warning')
        })
      }
      if (validatenull(this.videoUploadList)) {
        if (this.videoUploadList.some(e => validatenull(e.videoList))) return this.$msg._message('请上传示例视频', 'warning')
      }
      if (this.product.area === '1') this.product.cityIds = [1]
      const loanTabs = JSON.parse(JSON.stringify(this.loanTabs))
      loanTabs.map(
        e => {
          e.lastAttrsList = e.lastAttrsList.map(a => JSON.parse(a))
          e.afterLoanAttrsList = e.afterLoanAttrsList.map(a => JSON.parse(a))
          e.mortgageAttrsList = e.mortgageAttrsList.map(a => JSON.parse(a))
        })
      this.periodTabs.forEach(e => {
        e.rateLoop.sort((a, b) => a.interestRate - b.interestRate)
        if (e.chargeLoop.length === 1 && !e.chargeLoop.some(a => validatenull(a.quota) && validatenull(a.percentage))) {
          e.chargeLoop[0].lower = 0
        }
        e.chargeLoop.forEach(a => {
          if (validatenull(a.quota) || validatenull(a.percentage)) delete a['min']
        })
      })
      const fileList = JSON.parse(JSON.stringify(this.fileUploadList))
      fileList.map(
        e => {
          e.example = joinArray(e.exampleLoop.flatMap(a => a.names))
          e.displays = joinArray(e.exampleLoop.map(a => a.display))
          delete e['fileList']
          delete e['exampleLoop']
        }
      )
      const videoList = JSON.parse(JSON.stringify(this.videoUploadList))
      videoList.map(
        e => {
          e.videoName = joinArray(e.videoList.map(a => a.name))
          delete e['videoList']
        }
      )
      const params = {
        productId: this.$route.params.productId || null,
        businessType: 1,
        businessName: '新车',
        status: 0,
        cityIds: this.product.cityIds,
        supplierId: this.product.supplierId,
        supplierName: this.product.supplierName,
        productName: this.product.productName,
        loanLower: this.product.loanLower,
        loanUpper: this.product.loanUpper,
        pledgeRate: this.product.pledgeRate,
        downpayRatio: this.product.downpayRatio,
        gpsType: this.product.gpsType,
        gpsQuota: this.product.gpsQuota,
        gpsFinanceRate: this.product.gpsFinanceRate,
        gpsTabs: this.gpsTabs.map(e => { delete e['name']; return e }),
        insuranceType: this.product.insuranceType,
        ifinanceRate: this.product.ifinanceRate,
        purchaseTaxType: this.product.purchaseTaxType,
        ptfinanceRate: this.product.ptfinanceRate,
        balanceRate: this.product.balanceRate,
        grade: this.product.grade,
        qualify: joinArray(this.product.qualify),
        licenseTag: joinArray(this.product.licenseTags),
        period: joinArray(this.product.periods.sort()),
        signQuota: this.product.signQuota || null,
        singleSign: joinArray(this.product.singleSign),
        doubleSign: joinArray(this.product.doubleSign),
        earlyRepayment: this.product.earlyRepayment,
        advantage: joinArray(this.product.advantages) || null,
        qualifications: this.product.qualifications,
        sufProcessType: this.product.sufProcessType,
        examineType: this.product.examineType,
        firstAttrsList: this.product.firstAttrsList.map(e => JSON.parse(e)),
        loanTabs: loanTabs,
        periodTabs: this.periodTabs,
        fileList: fileList.length > 0 ? fileList : null,
        videoList: videoList.length > 0 ? videoList : null,
        beneficiary: this.product.beneficiary,
        accountTime: this.product.accountTime,
        accountInfo: this.accountInfo.some(a => a.title || a.url || a.info) ? this.accountInfo : null,
        process: this.processToString()
      }
      this.$http.post(api.SYS_PRODUCT_NEW, params).then(
        res => {
          if (res.code === HTTPSUCCESS) {
            this.$msg._message('产品上架成功！', 'success')
            this.$router.go(-1)
          } else {
            this.$msg._message('产品上架失败 请联系系统管理员', 'error')
          }
        }
      )
    },
    showImg(url) {
      this.$refs.view.showImg(url)
    },
    processChange() {
      const list = []
      const p = this.product.processList
      if (this.processChecked && this.processChecked.length > 0) {
        this.processChecked.forEach(item => {
          list.push({ label: item, mark: p ? (p.filter(a => a.label === item)[0] ? p.filter(a => a.label === item)[0].mark : null) : null })
        })
      }
      this.product.processList = list
    },
    processToString() {
      const list = []
      this.product.processList.forEach(item => {
        list.push(validatenull(item.mark) ? item.label : item.label + ';' + item.mark)
      })
      return list.join('&')
    },
    addDataTab(targetName) {
      const newTabName = ++this.dataTabIndex + ''
      this.loanTabs.push({
        name: newTabName,
        lastAttrsList: [],
        afterLoanAttrsList: [],
        mortgageAttrsList: []
      })
      this.dataTabValue = newTabName
    },
    removeDataTab(targetName) {
      const tabs = this.loanTabs
      let activeName = this.dataTabValue
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            const nextTab = tabs[index + 1] || tabs[index - 1]
            if (nextTab) {
              activeName = nextTab.name
            }
          }
        })
      }
      this.dataTabValue = activeName
      this.loanTabs = tabs.filter(tab => tab.name !== targetName)
    },
    addGpsTab(targetName) {
      const newTabName = ++this.gpsTabIndex + ''
      this.gpsTabs.push({
        name: newTabName,
        gpsLoop: [{}]
      })
      this.gpsTabValue = newTabName
    },
    removeGpsTab(targetName) {
      const tabs = this.gpsTabs
      let activeName = this.gpsTabValue
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            const nextTab = tabs[index + 1] || tabs[index - 1]
            if (nextTab) {
              activeName = nextTab.name
            }
          }
        })
      }
      this.gpsTabValue = activeName
      this.gpsTabs = tabs.filter(tab => tab.name !== targetName)
    },
    addLender(parentKey, targetType) {
      this.product._targetType = targetType
      this.product._parentKey = parentKey
      this.$http.get(api.SYS_PRODUCT_NEW_LENDER_POOL).then(
        res => {
          if (res.code === HTTPSUCCESS) {
            this.newLenderPool = res.data
            if (this.newLenderPool.picLenders && this.newLenderPool.picLenders.length > 0) {
              this.newLenderPool.picLenders.map(e => {
                if (!e.cantEdit) {
                  e.exampleLoop.push([{}])
                }
              })
            }
            this.newLenderPool.lenderCheckedList = []
            this.lenderDialog = true
          } else {
            this.$msg._message('请联系系统管理员', 'error')
          }
        }
      )
    },
    buildLender() {
      if (this.newLenderPool.picLenders.some(e => e.exampleLoop && e.exampleLoop.some(a => (vListLength(a.names) && !validatenull(a.display)) || (!vListLength(a.names) && validatenull(a.display))))) return this.$msg._message('新增材料的图片示例和描述需要填写完整！', 'warning')
      let newLenders = [
        ...this.newLenderPool.textLenders,
        ...this.newLenderPool.picLenders,
        ...this.newLenderPool.videoLenders,
        ...this.newLenderPool.fileLenders]
      newLenders.map(
        e => {
          if (e.exampleLoop) {
            e.examplePicNameList = e.exampleLoop.map(a => { if (a.names) return a.names[0] }).filter(b => b)
            e.tips = joinArray(e.exampleLoop.map(a => { if (a.display) return a.display }).filter(b => b))
            delete e['exampleLoop']
          }
          if (e && e.attrName != null) return e
        })
      this.newLenderPool.lenderCheckedList.forEach(
        lender => {
          newLenders = newLenders.map(
            e => {
              if (e.key === lender) { e.selected = true }
              return e
            }
          )
        }
      )
      const params = {
        newLenderPool: newLenders
      }
      this.$http.post(api.SYS_PRODUCT_NEW_LENDER, params).then(
        res => {
          if (res.code === HTTPSUCCESS) {
            this.$msg._message('新增材料成功！', 'success')
            this.fileAllList = res.data.fileAllList
            this.videoAllList = res.data.videoAllList
            const lastPool = res.data.lastPool
            lastPool.forEach(
              ele => {
                if (ele.selected) {
                  this.productMaterial[this.product._parentKey].splice(this.productMaterial[this.product._parentKey].length - 1, 0, { dataAttrId: ele.dataAttrId, name: ele.attrName, targetType: this.product._targetType })
                }
              }
            )
            this.lenderDialog = false
          } else {
            this.$msg._message('请联系系统管理员', 'error')
          }
        }
      )
    },
    pushLenderPool(poolKey, type) {
      const newKey = ++this.newLenderPool.lastIndex
      if (poolKey === 'picLenders') {
        this.newLenderPool[poolKey].push({ key: 'value' + newKey, type: type, exampleLoop: [{}] })
      } else {
        this.newLenderPool[poolKey].push({ key: 'value' + newKey, type: type })
      }
    },
    checked(periods) {
      const list = []
      periods.map(e => Number(e)).forEach(e => {
        if (this.periodTabs.some(a => a.period === e)) {
          list.push(this.periodTabs.filter(a => a.period === e)[0])
        } else {
          list.push({ period: e, rateLoop: [{}], chargeLoop: [{}] })
        }
      })
      list.sort((a, b) => a.period - b.period)
      this.periodTabs = list
    },
    trans(index, outIndex, flag) {
      if (flag === 'success') {
        this.newLenderPool.picLenders[outIndex].exampleLoop.push({})
      } else if (flag === 'remove') {
        this.newLenderPool.picLenders[outIndex].exampleLoop.splice(index, 1)
      }
    }
  }
}
</script>
